<template>
	<div class="u-page">
		<div class="aui-flex u-mt-10" @click="toGoodsDetails">
			<div class="aui-flex-goods">
				<img :src="SamplesData.goodsImages.split(',')[0]" alt="">
			</div>
			<div class="aui-flex-box">
				<div class="goods-title">
					{{SamplesData.goodsName?SamplesData.goodsName:''}}
				</div>
				<div class="u-fz-13 u-pt-5" style="color: #9f9d9e;">
					{{SamplesData.specification?SamplesData.specification:''}}
				</div>
				<div class="u-pt-10">
					<u-tag text="样品推广" color="#40972f" border-color="#40972f" bg-color="#ffffff" size="mini"
						mode="light" />
				</div>
			</div>
		</div>

		<p class="v-sperate"></p>
		<section class="j-block width93">
			<div class="modal-item" @click="showRules">
				<div style="font-weight: bold;">
					【非常重要！请仔细阅读！】
				</div>
				<div style="font-size: smaller;">
					<u-icon :name="iconName" color="#9f9d9e" size="24"></u-icon>
				</div>
			</div>

			<div v-if="show_rule">
				<div class="rule-title">
					试用要求
				</div>
				<div class="rule-content">
					<u-parse :html="this.escape2Html2(mainData.requiredContent)"></u-parse>
				</div>

				<div class="rule-title">
					评级标准
				</div>
				<div class="rule-content">
					<u-parse :html="this.escape2Html2(mainData.ratingCriteria)"></u-parse>
				</div>

				<div class="rule-title">
					领取规则
				</div>
				<div class="rule-content">
					<u-parse :html="this.escape2Html2(claimRules)"></u-parse>
				</div>
			</div>
		</section>

		<p class="v-sperate"></p>
		<div v-if="mainData.enableReport == '1'">
			<div class="aui-flex">
				<div class="aui-flex-box u-p-10">
					<h1>试用报告</h1>
				</div>
			</div>
			<div class="textarea-block u-mb-10">
				<u-input
					type="textarea" placeholder="请从价格、产品优缺点、使用感受、分销意愿、优化建议等方面撰写不少于50字的试用报告。" maxlength="1000"
					height="300" :autoHeight="false" v-model="SamplesData.feedbackContent"></u-input>
			</div>
			<div style="height: 10rpx ;border-bottom: 2rpx solid #f4f4f4;"></div>
		</div>

		<div v-if="mainData.enableMaterial == '1'">
			<div class="aui-flex">
				<div class="aui-flex-box u-p-10">
					<h1>测评素材<span class="Tips">建议上传3张以上试用照片或视频</span></h1>
				</div>
			</div>
			<div class="pictrues-box u-mt-15">
				<Upload u_appid="ProductPromote" :u_fieldName="UserInfo.userId" :u_orunid="recordId" u_type="2"
					:u_initialAttchments="SubmitResultsFiles" @receiveAttachmentsData="getResultsFiles"></Upload>
			</div>
			<div style="height: 10rpx ;border-bottom: 2rpx solid #f4f4f4;"></div>
		</div>

		<div v-if="mainData.enableSocial == '1'">
			<div class="aui-flex">
				<div class="aui-flex-box u-p-10">
					<h1>社交平台截图凭证</h1>
				</div>
			</div>
			<div class="pictrues-box u-mt-15">
				<Upload u_appid="provide_samples" u_fieldName="social" :u_orunid="recordId" u_type="2"
					:u_initialAttchments="SocialPlatformFiles" @receiveAttachmentsData="getSocialFiles"></Upload>
			</div>
			<div style="height: 10rpx ;border-bottom: 2rpx solid #f4f4f4;"></div>
		</div>

		<div class="aui-flex aui-choice-white b-line">
			<div class="aui-flex-box u-p-10">微信昵称</div>
			<u-input v-model="UserInfo.nickName" input-align="right" placeholder="请填写微信昵称" />
		</div>

		<div style="height: 250rpx;"></div>

		<div style="position: fixed;bottom: 0rpx;background-color: #fffbfe;width: 100%;z-index: 3;">
			<div class="u-pt-10 u-pb-30" style="width: 90%;margin: 0 auto;height: 80px;">
				<u-button type="success" :custom-style="customStyle" :disabled="Requesting" @click="submit">
					提交
				</u-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				UserInfo: {},
				recordId: '',
				SamplesData: {},
				SubmitResultsFiles: [],
				SocialPlatformFiles: [],
				customStyle: {
					background: '#eb5468 !important'
				},
				Requesting: false, //接口请求中标志
				mainData: {
					enableReport: '0',
					enableMaterial: '0',
					enableSocial: '0',
				},
				show_rule: false,
				claimRules: '领取样品后，需完成产品试用，并按照试用要求提交评价，达到评级标准的平台会发放相应的报酬！如未完成评价，则会限制您继续参与其他样品活动，敬请谅解～',
				iconName: 'arrow-right',
			}
		},

		mounted() {

		},

		onShow() {},

		onLoad(options) {
			// 未登录跳转到登录页面
			let loginRes = this.checkLogin(1);
			if (!loginRes) {
				return false;
			}
			this.UserInfo = uni.getStorageSync('userInfo')
			if (this.isNotNull(options.recordId)) {
				this.recordId = options.recordId
				// 获取领取记录(订单)详情
				this.getRecordDetails(options.recordId)
			} else {
				this.showMSG('error', '出错啦！')
				setTimeout(() => {
					this.goBack()
				}, 2000)
			}
		},

		methods: {

			/**
			 * 获取订单详情
			 */
			async getRecordDetails(recordId) {
				let result = await this.$u.api.unifyMiniRestGet({
					systemid: "meily",
					url: "/provide/samples/sub/info/" + recordId,
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.SamplesData = result.data

					// 获取样品活动详情
					if (this.isNotNull(this.SamplesData.mainId)) {
						let result2 = await this.$u.api.unifyMiniRestGet({
							systemid: "meily",
							url: "/provide/samples/info/" + this.SamplesData.mainId,
							loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
						});
						if (result2.code == 200) {
							this.mainData = result2.data
						}
					}

					this.getFiles(this.SamplesData.id, this.SamplesData.partnerId); // 试用素材
					this.getFiles(this.SamplesData.id, "social"); // 社交平台截图凭证

				} else {
					this.showMSG("error", result.msg);
					setTimeout(() => {
						this.goBack()
					}, 2500)
				}
			},

			/** 
			 * 提交反馈
			 */
			async submit() {
				
				// 试用报告必填校验
				if(this.mainData.enableReport == '1'){
					if (!this.isNotNull(this.SamplesData.feedbackContent)) {
						this.showMSG('none', '请填写试用报告！')
						return
					}
					
					if(this.SamplesData.feedbackContent.length < 50){
						this.showMSG('none', '试用报告不得少于50字！')
						return
					}
				}
				
				this.Requesting = true

				// 试用素材
				let feedbackPictures = ''
				for (const i in this.SubmitResultsFiles) {
					if (feedbackPictures == '') {
						feedbackPictures = this.SubmitResultsFiles[i].url
					} else {
						feedbackPictures += "," + this.SubmitResultsFiles[i].url
					}
				}
				
				// 试用素材必填校验
				if(this.mainData.enableMaterial == '1'){
					if (!this.isNotNull(feedbackPictures)) {
						this.showMSG('none', '请上传试用素材！')
						return
					}
				}
				

				// 社交平台截图凭证
				let socialPlatformPictures = ''
				for (const i in this.SocialPlatformFiles) {
					if (socialPlatformPictures == '') {
						socialPlatformPictures = this.SocialPlatformFiles[i].url
					} else {
						socialPlatformPictures += "," + this.SocialPlatformFiles[i].url
					}
				}
				
				// 社交平台截图凭证必填校验
				if(this.mainData.enableSocial == '1'){
					if (!this.isNotNull(socialPlatformPictures)) {
						this.showMSG('none', '请上传社交平台截图凭证！')
						return
					}
				}

				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/provide/samples/sub/feedback",
					id: this.recordId,
					feedbackContent: this.SamplesData.feedbackContent,
					feedbackPictures: feedbackPictures,
					socialPlatformPictures: socialPlatformPictures,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.showMSG("success", "已反馈");
					setTimeout(() => {
						uni.$emit("finishOrder", this.recordId);
						this.goBack()
					}, 2500)
				} else {
					this.showMSG('error', '出错啦')
					this.Requesting = false
				}
			},

			/**
			 * 接收上传组件传过来的值并更新附件列表数据
			 * 获取附件列表（测评素材）
			 */
			async getResultsFiles(res) {
				this.SubmitResultsFiles = res;
			},

			/**
			 * 接收上传组件传过来的值并更新附件列表数据
			 * 获取附件列表（社交平台截图凭证）
			 */
			async getSocialFiles(res) {
				this.SocialPlatformFiles = res;
			},

			/**
			 * 【重要！样品领取前请仔细阅读】 
			 */
			showRules() {
				if (this.show_rule) {
					this.iconName = 'arrow-right'
					this.show_rule = false
				} else {
					this.iconName = 'arrow-down'
					this.show_rule = true
				}
			},

			/**
			 * 初始化附件列表（凭证）
			 * @param {Object} orunid 实例id
			 */
			async getFiles(orunid, fieldName) {
				const userInfo = uni.getStorageSync('userInfo')
				let result = await this.$u.api.unifyRequest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'FILE',
					wf_num: 'R_FILE_BL002',
					orunid: orunid,
					fieldName: fieldName,
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					// 试用素材
					if (fieldName == this.SamplesData.partnerId) {
						this.SubmitResultsFiles = result.data
					}
					// 社交平台截图凭证
					if (fieldName == "social") {
						this.SocialPlatformFiles = result.data
					}
				}
			},

			/**
			 * 跳转到销售机会页面
			 */
			async toGoodsDetails() {
				this.$u.route('/pages_private_scene2/GroupPurchase/DistributionGoods?goodsNo=' + this.SamplesData
					.goodsNo + '&goodsId=' + this.SamplesData.goodsId);
			}

		}

	};
</script>

<style scoped>
	.aui-flex {
		display: flex;
		width: 93%;
		margin: 0 auto;
	}

	.aui-flex-goods {
		margin-right: .8em;
		width: 160rpx;
		height: 160rpx;
		line-height: 160rpx;
		text-align: center;
	}

	.aui-flex-goods img {
		width: 100%;
		max-height: 100%;
		vertical-align: top;
		border-radius: 15rpx;
	}

	.aui-flex-box {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		min-width: 0;
		font-size: 14px;
		color: #333;
	}

	.goods-title {
		width: 515rpx;
		display: -webkit-box;
		/*必须结合的属性,将对象作为弹性伸缩盒子模型显示*/
		-webkit-line-clamp: 1;
		/*设置多少行*/
		-webkit-box-orient: vertical;
		/*必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式*/
		overflow: hidden;
		/*文本会被修剪，并且剩余的部分不可见*/
		text-overflow: ellipsis;
		/*显示省略号来代表被修剪的文本*/
		font-size: 32rpx;
	}

	.textarea-block {
		background: #f5f5f5;
		width: 93%;
		margin: 0 auto;
		border-radius: 5px;
		padding: 20rpx;
		height: 11.5rem;
		user-select: text !important;
		-webkit-user-select: text;
	}

	.textarea-block textarea {
		width: 100%;
		padding: 1rem;
		font-size: 0.95rem;
		overflow: hidden;
		resize: none;
		height: 8rem;
		border: none;
		background: none;
		line-height: 1.8;
	}

	.pictrues-box {
		width: 95%;
		margin: 0 auto;
	}

	.v-sperate {
		height: 5rpx;
		background: #f7f1f7;
	}

	.width93 {
		width: 93%;
		margin: 0 auto;
	}

	.modal-item {
		/* margin: 40rpx 0rpx; */
		height: 100rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* color: #9f9d9e; */
		border-top: 1rpx solid #eeeded;
	}

	.rule-title {
		height: 100rpx;
		line-height: 100rpx;
		width: 90%;
		margin: 0 auto;
		font-weight: bold;
	}

	.rule-content {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f4f4f4;
	}

	.Tips {
		font-size: 24rpx;
		line-height: 24rpx;
		color: #f02323;
		padding-left: 10rpx;
	}

	.aui-choice-white {
		background: #fff;
	}

	.b-line {
		position: relative;
	}

	.b-line:after {
		content: '';
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid #e2e2e2;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}
</style>